<template>
    <!-- 改变build文件后还请重启服务器 -->
    <bar>
        <bar-item path="/home" activeColor="pink" class="item">
            <img slot="ico" src="~assets/img/tabbar/home.svg"/>
            <img slot="ico_active" src="~assets/img/tabbar/home_active.svg" />    <!-- 注意波浪线 -->
            <div slot="text"><b>首页</b></div>
        </bar-item>
        <bar-item path="/category" activeColor="pink" class="item">
            <img slot="ico" src="~assets/img/tabbar/category.svg"/>
            <img slot="ico_active" src="~assets/img/tabbar/category_active.svg" />    <!-- 注意波浪线 -->
            <div slot="text"><b>分类</b></div>
        </bar-item>
        <bar-item path="/car" activeColor="pink" class="item">
            <img slot="ico" src="~assets/img/tabbar/shopcart.svg"/>
            <img slot="ico_active" src="~assets/img/tabbar/shopcart_active.svg" />    <!-- 注意波浪线 -->
            <div slot="text"><b>购物车</b></div>
        </bar-item>
        <bar-item path="/profile" activeColor="pink" class="item">
            <img slot="ico" src="~assets/img/tabbar/profile.svg"/>
            <img slot="ico_active" src="~assets/img/tabbar/profile_active.svg" />    <!-- 注意波浪线 -->
            <div slot="text"><b>我的</b></div>
        </bar-item>
    </bar>
</template>

<script>
import bar from 'components/common/bar/Bar.vue'    //此处为别名，参考webpackbase
import barItem from 'components/common/bar/BarItem.vue'

export default {
  name: '',
  components: {
    bar,barItem
  },
  data(){
    return {
      item:[
        {
          name:'首页',
          url:'/img/home.7210ddcb.svg',
          actUrl:'/img/home_active.cc40b6f2.svg',
          path:'/home'
        },
        {
          name:'分类',
          url:'/img/category.12bedb89.svg',
          actUrl:'/img/category_active.cb2cc09f.svg',
          path:'/category'
        },
        {
          name:'购物车',
          url:'/img/shopcart.c68224ce.svg',
          actUrl:'/img/shopcart_active.3f0a2016.svg',
          path:'/car'
        },
        {
          name:'我的',
          url:'/img/profile.42d7cf12.svg',
          actUrl:'/img/profile_active.fd66b281.svg',
          path:'/profile'
        }
      ],
     }
  }
}
</script>

<style scoped>
  img{
	  width: 24px;
	  height: 24px;
  }
  .item{
    margin-top: 4px;
    font-size: 10px;
  }
</style>
